import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
import { classModule } from 'snabbdom/build/package/modules/class'
import { propsModule } from 'snabbdom/build/package/modules/props'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

import './index.less'

const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
])

const container = document.getElementById('container')

let rankNum = 10
let ulNode = null
let sortFlag = -1

const list = [
    {
        rank: 8,
        title: "The Good, the Bad and the Ugly",
        description: "A bounty hunting scam joins two men in an uneasy alliance against athird in arace to find afortune in gold buried in aremote cemetery."
    },
    {
        rank: 9,
        title: "12 Angry Men",
        description: "a dissenting juror in amurder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court."
    },
    {
        rank: 10,
        title: "Fight Club",
        description: "An insomniac office worker looking for away to change his life crosses paths with adevil-may-care soap maker and they form an underground fight club that evolves into something much, much more..."
    },
]


// 渲染ul列表
const renderList = list => {
    const liNodes = list.map(item => {
        return h('li', {
            key: item.rank
        }, [
            h('div', { style: { width: '10%' } }, item.rank),
            h('div', { style: { width: '30%' } }, item.title),
            h('div', { style: { width: '60%' } }, item.description),
            h('button', {
                props: { type: 'button' }, on: { click: () => deleteList(item) },
                hook: {
                    insert: (vnode) => {
                        vnode.elm.innerHTML = vnode.text
                    },
                    postpatch: (oldVnode, vnode) => {
                        vnode.elm.innerHTML = vnode.text
                    }
                }
            }, '&times;')
        ])
    })
    return h('ul.list', liNodes)
}


ulNode = renderList(list)

// 添加一条数据
const handleAdd = () => {
    ++rankNum
    let item = {
        rank: ++rankNum,
        title: rankNum + " Angry Men",
        description: "dissenting juror in amurder trial slowly manages to convince the others that the case is not as obviously clear as it seemed in court."
    }
    list.push(item)

    const newUlNode = renderList(list)

    ulNode = patch(ulNode, newUlNode)
}

// 删除一条数据
const deleteList = (record) => {
    let index = -1
    for (let i = 0, l = list.length; i < l; i++) {
        if (list[i].rank === record.rank) {
            index = i
            break
        }
    }
    if (index > -1) {
        list.splice(index, 1)
    }

    const newUlNode = renderList(list)

    ulNode = patch(ulNode, newUlNode)
}

// 排序
const handleActionClick = (type) => {
    sortFlag = -sortFlag
    list.sort((a, b) => {
        if (!isNaN(a[type]) && !isNaN(b[type])) {
            return sortFlag * (b[type] - a[type])
        }
        return sortFlag * (b[type].charCodeAt() - a[type].charCodeAt())
    })

    const newUlNode = renderList(list)

    ulNode = patch(ulNode, newUlNode)
}

// 标题
const h1Node = h('h1.title', 'Top 10 movies')

// 操作按钮区
const actionNode = h('div.action', [
    h('div.action-group', [
        h('span', 'Sort by:'),
        h('div.action-main', [
            h('span', {
                on: {
                    click: () => handleActionClick('rank')
                }
            }, 'Rank'),
            h('span', {
                on: {
                    click: () => handleActionClick('title')
                }
            }, 'Title'),
            h('span', {
                on: {
                    click: () => handleActionClick('description')
                }
            }, 'Description'),
        ]),
    ]),
    h('div.action-main', [
        h('span', {
            on: {
                click: handleAdd
            }
        }, 'Add'),
    ])
])


// 根节点的虚拟dom
const vnode = h('div#container.container', [
    h1Node,
    actionNode,
    ulNode,
])

patch(container, vnode)